<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>模板引擎的使用</title>

    <style>
        .[[${className}]]{
           width: 600px;
           height: 300px;
           color: pink;
           line-height: 300px;
           text-align: center;
           border: 1px solid darkblue;
        }
    </style>
</head>
<body>
this is Demo1 Page!!!And you ????<br>
<div th:text="'用户名是:'+${username}"></div>
<div th:text="'年龄是:'+${age}"></div>
<div th:text="'年龄+10岁是:'+${age+10}"></div>
<div th:text="'年龄*10岁是:'+${age}*10"></div>
<div th:text="'年龄*是否大于18岁:'+(${age}>=18)"></div>
<div th:text="'年龄*是否大于18岁:'+${age >=18}"></div>
<div th:text="'单元运算符'+(${age}>18)?'可以看电影':'小屁孩不能看'"></div>

<!--下面玩下条件判断-->

<!--  条件成立的时候显示-->
<span th:if="${age}>18">年龄大于18岁 </span><br>

<!--条件不成立的时候显示-->
<div th:unless="${age}>18">没满18岁呢</div>

<!--下面研究下switch-->
<div th:switch="${age}">
    <div th:case="18">年龄18岁</div>
    <div th:case="20">年龄20岁</div>
</div>

<hr/>

<table cellspacing="0" cellpadding="0" border="1" style="width: 300px;text-align: center">
    <tr>
        <th>用户id</th>
        <th>用户名</th>
        <th>密码</th>
        <th>下标</th>
    </tr>
    <!--
    user：每一次遍历出来的对象
    status：每一次遍历的下标
    ${userList}：我们要遍历的集合
    -->
    <tr th:each="user,status:${userList}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.username}"></td>
        <td th:text="${user.password}"></td>
        <td th:text="${status.index}"></td>
    </tr>
</table>
<hr>
<!--    下面使用$和新号去读取这个数据-->
<div th:object="${user}">
    <p>Name: <span th:text="*{username}">wangwu</span>.</p>
    <p>AGE: <span th:text="*{password}">22</span>.</p>
</div>

<hr/>
<div th:text="${user.username}"></div>
<div th:text="${user.password}"></div>


<!--下面玩下这个内联的样式-->
<!--在咋们的标签里面直接去读取这个数据 不用 th:text去显示-->

<div th:inline="text">标签中读取域对象中的数据:[[${user.username}]]</div>

<!--在js中直接去读取这个域对象的数据-->
<script th:inline="javascript">
    //然后这里就可以读取这个数据了...
    var data=[[${user.username}]];
    alert('读取到的数据是:'+data)
</script>

<!--下面这个就有点颠覆你们的想法了-->
<div class="class1">这里是测试在css样式中去获取域对象的数据</div>


<!--现在假设我要通过 [[${user.username}]] 我不想这个模板引擎去惊醒翻译这就是一个原样字符-->

<div th:inline="none">[[${user.username}]]</div>
</body>
</html>